<template>
  <div class="login-container">
    <div class="background">
      <img src="@/assets/picture/section02.jpg" width="100%" height="100%" alt=""  />
    </div>
    <div class="login-box">
      <!-- 头像区域 -->
      <div class="text-center avatar-box">
        <img src="../assets/logo.png" class="img-thumbnail avatar" alt="" />
      </div>

      <!-- 表单区域 -->
      <div class="form-login p-4">
        <!-- 登录名称 -->
        <div class="form-group form-inline">
          <label for="username">登录名称</label>
          <input
            type="text"
            class="form-control ml-2"
            id="username"
            placeholder="请输入登录名称"
            autocomplete="off"
            v-model.trim="username"
          />
        </div>
        <!-- 登录密码 -->
        <div class="form-group form-inline">
          <label for="password">登录密码</label>
          <input
            type="password"
            class="form-control ml-2"
            id="password"
            placeholder="请输入登录密码"
            v-model.trim="password"
          />
        </div>
        <!-- 登录和重置按钮 -->
        <div class="form-group form-inline d-flex justify-content-end">
          <button type="button" class="btn btn-secondary mr-2" @click="reset">重置</button>
          <button type="button" class="btn btn-primary mr-2" @click="login">登录</button>
           <button type="button" class="btn " @click="register " style="background:orange;color:#fff;">注册</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast, Dialog } from 'vant'
import Qs from 'qs'
import request from '@/utils/request.js'
export default {
  // name定名字的
  name: 'MyLogin',
  // 组件，组件通信，父亲要用子组件的，下面定义这下面是vant的组件
  components: {
    [Toast.name]: Toast,
    [Dialog.name]: Dialog
  },
  // 初始化数据
  data() {
    return {
      username: '',
      password: ''
    }
  },
  // 上面的data初始化之后干什么
  create() {
  },
  // 计算属性，改变属性的用的
  computed: {
  },
  // 方法定义函数 这下面很多this大部分都是要调用data里面的属性需要this的
  methods: {
    reset() {
      this.username = ''
      this.password = ''
    },
    login() {
      this.getlogin()
    },
    // async异步等下面的awit完成才会让getlogin继续下去
    async getlogin() {
      const params = {
        username: this.username,
        password: this.password
      }
      // 调用接口，接口参数
      const { data: res } = await request.post('/api/login', Qs.stringify(params))
      // 将token和username放到浏览器的locolsto那里去
      if (res.status === 0) {
        localStorage.setItem('token', res.token)
        localStorage.setItem('username', this.username)
        // 将登录名使用vuex传递到Home页面
        this.$store.commit('handleToken', res.token)
        // push就是路由跳转url跳转
        this.$router.push('/home')
      } else {
        Dialog.alert({
          message: res.message
        }).then(() => {
          // on close
        })
      }
    },
    register() {
      this.$router.push('/register')
    }
  }
}
</script>

<style lang="less" scoped>
.login-container {
  height: 100%;
    .background {
    width: 100%;
    height: 100%;
    /**宽高100%是为了图片铺满屏幕 */
    z-index: -1;
    position: absolute;
}
  img {
    height: 100%;
    width: 100%;
  }
  .login-box {
    width: 300px;
    height: 250px;
    background-color: #fff;
    border-radius: 3px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
    .form-login {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      box-sizing: border-box;
    }
  }
}
.form-control {
  flex: 1;
}

.avatar-box {
  position: absolute;
  width: 100%;
  top: -65px;
  left: 0;
  .avatar {
    width: 120px;
    height: 120px;
    border-radius: 50% !important;
    box-shadow: 0 0 6px #efefef;
  }
}
</style>
